<!--
 * @Author: zcy
 * @Date: 2025-02-17 10:20:28
 * @LastEditTime: 2025-02-17 14:01:24
 * @LastEditors: zcy
 * @FilePath: \my-vue-app\src\components\HelloWorld.vue
 * @Description: 
-->
<script setup>
import { reactive, ref } from "vue";
import database from "../database/pokemon_data1.json";
defineProps({
  msg: String,
});

const count = ref(0);
let sizeForm = reactive({
  name: "",
});
// const generatedText = computed(() => {
//   const traits = {
//     0: ["展现", "特征："],
//     1: ["采用", "沟通方式："],
//     2: ["需要", "生活空间："],
//     3: ["渴望", "能力维度："],
//     4: ["遵循", "时间哲学："],
//   };

//   return `一位${selections.join(" + ")}的进化体，${traits[0][0]}${
//     traits[0][1]
//   }「${selections[0]}」，${traits[1][0]}${traits[1][1]}「${selections[1]}」，${
//     traits[2][0]
//   }${traits[2][1]}「${selections[2]}」，${traits[3][0]}${traits[3][1]}「${
//     selections[3]
//   }」，${traits[4][0]}${traits[4][1]}「${selections[4]}」的独特存在。`;
// });

const select = reactive([]);
const questions = reactive([
  {
    text: "Q1. 遇到突发危机的第一反应？",
    options: [
      { text: "A) 调取应急预案文档", value: "秩序守护者", val: 0 },
      { text: "B) 呼叫支援组成联盟", value: "群落共生者", val: 1 },
      { text: "C) 直接正面突破险境", value: "孤高挑战者", val: 2 },
      { text: "D) 用非常规手段破局", value: "规则破坏者", val: 3 },
    ],
  },
  {
    text: "Q2. 团队合作中你常被评价为？",
    options: [
      { text: "A) 善于调和矛盾的气氛组", value: "协调者", val: 0 },
      { text: "B) 能精准预测风险的智囊", value: "分析者", val: 1 },
      { text: "C) 带领大家冲刺的领队", value: "领导者", val: 2 },
      { text: "D) 提出疯狂创意的鬼才", value: "革新者", val: 3 },
    ],
  },
  {
    text: "Q3. 做决策时更依赖?",
    options: [
      { text: "A) 数据图表与概率计算", value: "客观分析", val: 0 },
      { text: "B) 亲友的实际经验建议", value: "群体智慧", val: 1 },
      { text: "C) 直觉与瞬间灵感闪现", value: "内在感知", val: 2 },
      { text: "D) 道德准则与价值判断", value: "主观原则", val: 3 },
    ],
  },
  {
    text: "Q4. 最吸引你的视觉元素是?",
    options: [
      { text: "A) 精密机械的结构美", value: "工业美学", val: 0 },
      { text: "B) 自然生态的和谐感", value: "生命美学", val: 1 },
      { text: "C) 抽象艺术的情绪张力", value: "概念美学", val: 2 },
      { text: "D) 复古文化的厚重感", value: "人文美学", val: 3 },
    ],
  },
  {
    text: "Q5. 你理想的周末是？",
    options: [
      { text: "A) 参加行业交流会学习", value: "知识拓展", val: 0 },
      { text: "B) 与好友露营看星空", value: "情感联结", val: 1 },
      { text: "C) 独自研究新爱好技能", value: "自我沉淀", val: 2 },
      { text: "D) 极限运动释放压力", value: "刺激追求", val: 3 },
    ],
  },
  // 其他题目结构类似，此处省略以节省篇幅
]);
function check() {
  console.log(select);
}
</script>

<template>
  <div class="card">
    <!-- <el-form
      style="width: 1000px"
      :model="sizeForm"
      :label-position="'top'"
      :size="size"
    > -->
    <el-card
      style="max-width: 6000px"
      v-for="(item, index) in questions"
      :key="index"
    >
      <template #header>
        <div class="card-header">
          <span>{{ item.text }}</span>
        </div>
      </template>
      <el-radio-group v-model="select[index]">
        <el-radio
          v-for="(jtem, jndex) in item.options"
          :key="jndex + jtem.val + ''"
          :value="item.options[jndex]"
          >{{ item.options[jndex].text }}</el-radio
        >
      </el-radio-group>
    </el-card>
    <!-- <el-form-item
      v-for="(item, index) in questions"
      :key="index"
      :label="item.text"
    >
      <el-radio-group v-model="select[index]">
        <el-radio
          v-for="(jtem, jndex) in item.options"
          :key="jndex + jtem.val + ''"
          :value="item.options[jndex]"
          >{{ item.options[jndex].text }}</el-radio
        >
      </el-radio-group>
    </el-form-item> -->
    <!-- <el-form-item>
        <el-button type="primary" @click="check">Create</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form> -->
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
